<template>
  <div :class="['reservation_init',{'reservation':init}]">
    <img alt="Vue logo" src="../assets/logo.png" height="80pt">
    <h1>预定房间</h1>

    <div id="reserve-info" class="reserve-info">
      <img src="../assets/blank.png" width="15vw">
      <div class="info-input-view">
      <br>
      <div id="room-type-div" class="room-div">   
        <div id="room-time-div" class="room-div">
          <i>请输入开始时间：</i>
          <el-date-picker
            v-model="sendMessage.startDate"
            type="date"
            placeholder="选择日期"
            :picker-options="{ disabledDate: time => time.getTime() < Date.now() }"
            value-format="YYYY-MM-DD"></el-date-picker>
        </div>   
        <br><br><br><br>
        <div id="room-time-div" class="room-div">
          <i>请输入退房时间：</i>
          <el-date-picker
            v-model="sendMessage.endDate"
            type="date"
            placeholder="选择日期"
            :picker-options="{ disabledDate: time => time.getTime() < Date.now() }"
            value-format="YYYY-MM-DD"></el-date-picker>
        </div>   
        <br><br><br><br>
        <i>选择预定的房间类型：</i>
        <el-radio-group id="room-type" v-model="sendMessage.radioType">
          <el-radio value="type-1" border>总统套房</el-radio>
          <el-radio value="type-2" border>高级套房</el-radio>
          <el-radio value="type-3" border>普通套房</el-radio>
        </el-radio-group>
      </div>
      <br><br><br><br>
      <div id="room-location-div" class="room-div">
        <i>选择预定的房间的大致方位：</i>
        <el-radio-group id="room-location" v-model="sendMessage.radioLocation">
          <el-radio value="location-1" border>面向风景区</el-radio>
          <el-radio value="location-2" border>面向城区</el-radio>
          <el-radio value="location-3" border>内部区域</el-radio>
        </el-radio-group>
      </div>
      <br><br><br><br>
      <div id="room-location-div" class="room-div">
        <i>选择预定的房间的大致楼层：</i>
        <el-radio-group id="room-floor" v-model="sendMessage.radioFloor">
          <el-radio value="floor-1" border>低层</el-radio>
          <el-radio value="floor-2" border>中低层</el-radio>
          <el-radio value="floor-3" border>中高层</el-radio>
          <el-radio value="floor-4" border>高层</el-radio>
        </el-radio-group>
      </div>
      <br><br><br><br>
      <div id="room-people-div" class="room-div">
        <i>选择本房间入住的大概人数：</i>
        <el-radio-group id="room-people" v-model="sendMessage.radioPeople">
          <el-radio value="people-p1" border>1人</el-radio>
          <el-radio value="people-p2" border>2-3人</el-radio>
          <el-radio value="people-p3" border>4-5人</el-radio>
        </el-radio-group>
      </div>
      <br><br><br><br>
      <div id="input-roomNumber" class="room-div">
        <i>输入房间：</i>
        <el-input v-model="sendMessage.roomNumber"></el-input>
      </div>
      <br><br><br><br>
      <div id="input-identification" class="room-div">
        <i>输入姓名：</i>
        <el-input v-model="sendMessage.inputName"></el-input>
      </div>
      <br><br><br><br>
      <div id="input-identification" class="room-div">
        <i>输入身份证号码：</i>
        <el-input v-model="sendMessage.inputIdentification"></el-input>
      </div>
      <br><br><br>
    </div>
    <img src="../assets/blank.png" width="15vw">
    </div>

    <div id="confirm-button">
      <br>
      <el-button type="success" @click="this.clearInput">重置选择</el-button>
      <el-button type="success" @click="this.sendReservationInfo">确认提交</el-button>
    </div>
  </div>
</template>

<script>
import { ElRadioGroup } from 'element-plus';
import { ElRadio } from 'element-plus';
import { ElInput } from 'element-plus';
import { ElButton } from 'element-plus';
import { ElDatePicker } from 'element-plus';
import axios from 'axios';

export default {
  name: 'ReservationView',
  components: {
    ElRadioGroup,
    ElRadio,
    ElInput,
    ElButton,
    ElDatePicker,
  },
  mounted(){
    //通过设定延迟时间，实现跳出本页面的效果
    setTimeout(() => {
      this.init=true;
    }, 10);
  },
  data(){
    return{
      sendMessage:{
        // type:"3",
        startDate:"",
        endDate:"",
        roomNumber:"",
        radioType:"default",
        radioLocation:"default",
        radioFloor:"default",
        radioPeople:"default",
        inputName:"",
        inputIdentification:"",
      },
      //控制本页面初始化跳出的效果
      init:false,
    }
  },
  methods:{
    //发送预定房间的消息
    sendReservationInfo(){
      if(this.sendMessage.inputIdentification.length!=18)
        alert("请输入正确格式的身份证号码")
      else if(this.sendMessage.inputName.length<=0)
        alert("请输入正确格式的身份证号码")
      else if(this.sendMessage.startDate.length<=0)
        alert("请输入入住时间")
      else if(this.sendMessage.endDate.length<=0)
        alert("请输入退房时间")
      else{
        console.log(this.sendMessage);

        this.$store.dispatch('sendMessage', {
          text:"预定请求已发送，正在处理中...",
          receiver:true,
          type:"default",
        })
        this.clearInput();
        //跳回chat界面
        this.$router.push('/');

        
        //传送消息在此实现:
        let url="http://localhost:8080/api/checkin";
        axios.post(url,{
          roomNumber:this.sendMessage.roomNumber,
          name:this.sendMessage.inputName,
          idNumber:this.sendMessage.inputIdentification,
          startTime:this.sendMessage.startDate,
          endTime:this.sendMessage.endDate,
        }).then(result=>{
          console.log('received check in Msg from java');
          this.$store.dispatch('sendMessage', {
            text:result.data.message,
            receiver:true,
            type:"default",
        })
          })
          .catch(err=>{
            console.log(err);
          })
      }
    },
    clearInput(){
      this.sendMessage.radioType="default";
      this.sendMessage.radioLocation="default";
      this.sendMessage.radioFloor="default";
      this.sendMessage.radioPeople="default";
      this.inputName="";
      this.inputIdentification="";
    },

  }
}
</script>

<style scoped>
.reservation_init{
  position: relative;
  width: 60vw;
  left: -60%;
  transform: translate(-40%,0%);
  transition: top 0.5s, left 0.5s, bottom 0.5s, right 0.5s;
  z-index: 1;/*覆盖优先度 */
}

.reservation{
  position: relative;
  width: 75vw;
  left: 30vw;
  z-index: 1;/*覆盖优先度 */
}

.el-input{
  width: 40vw;
}

.el-button{
  width: 20vw;
  max-width: 120pt;
  right: 0cap;
}

.room-div{
  float:left;
  text-align: left;
}

.reserve-info{
  display: flex;
  border: 1pt solid #aaaaaa;
  /* border-bottom-style: dotted; */
}

</style>

<style>
i{
  margin-right: 20pt;
}
</style>